<script setup lang="ts">
  import icon1 from './icons/device.svg?url';
  import icon2 from './icons/user.svg?url';
  import icon3 from './icons/cunzhen.svg?url';
  import icon4 from './icons/notice.svg?url';
  import icon5 from './icons/email.svg?url';
  import icon6 from './icons/file.svg?url';
  import ScrollTable from './scroll-table.vue';

  const dataItems = [
    {
      icon: icon1,
      title: '累计在装设备数量',
      value: 615,
    },
    {
      icon: icon2,
      title: '累计受益老人数量',
      value: 123,
    },
    {
      icon: icon3,
      title: '服务村镇数量',
      value: 1,
    },
    {
      icon: icon4,
      title: '累计报警次数',
      value: 156,
    },
    {
      icon: icon5,
      title: '累计响应率',
      value: '97.50%',
    },
    {
      icon: icon6,
      title: '事件处理累计数量',
      value: 152,
    },
  ];

  const columns = [
    {
      title: '长者姓名',
      dataIndex: 'name',
    },
    {
      title: '设备名称',
      dataIndex: 'deviceName',
    },
    {
      title: '长者归属年度',
      dataIndex: 'year',
    },
    {
      title: '设备状态',
      dataIndex: 'status',
    },
  ];

  /**
   * 陈春霞	SOS智能报警器	2025年度	正常
赵丽香	毫米波跌倒雷达	2025年度	离线
王新宇	智能语音对讲机	2025年度	故障
陈晓莉	SOS智能报警器	2025年度	正常
王大治	毫米波跌倒雷达	2025年度	正常
陈伟	智能语音对讲机	2025年度	正常
张鑫	智能语音对讲机	2025年度	正常

   */

  const data = [
    {
      name: '王传菊',
      deviceName: 'SOS智能报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '孙启录',
      deviceName: '生命体征监测仪',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '沈照英',
      deviceName: '烟雾报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '蔡云利',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '韩祥吉',
      deviceName: '乐龄智护胸卡',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '宋恒香',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '韩祥春',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '宋传香',
      deviceName: 'SOS智能报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '宋传新',
      deviceName: '生命体征监测仪',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '李成录',
      deviceName: '烟雾报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '任世梅',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '王太章',
      deviceName: '乐龄智护胸卡',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '张成忠',
      deviceName: '烟雾报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '宋以美',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '陈长秀',
      deviceName: '乐龄智护胸卡',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '宋传桃',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '秦元花',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '陈传香',
      deviceName: 'SOS智能报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '周仕文',
      deviceName: '生命体征监测仪',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '张学美',
      deviceName: 'SOS智能报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '沈学珍',
      deviceName: '生命体征监测仪',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '韩祥柱',
      deviceName: '烟雾报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '张成美',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '陈长柱',
      deviceName: '乐龄智护胸卡',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '陈安凤',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '沈学爱',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '蔡春德',
      deviceName: 'SOS智能报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '苏成莲',
      deviceName: '生命体征监测仪',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '宋传海',
      deviceName: '烟雾报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '沈传英',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '蔡云平',
      deviceName: '乐龄智护胸卡',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '李崇修',
      deviceName: '烟雾报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '张庆英',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '李崇新',
      deviceName: '乐龄智护胸卡',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '王建珠',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '池言凤',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '尚现忠',
      deviceName: 'SOS智能报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '张淑凤',
      deviceName: '生命体征监测仪',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '陈德英',
      deviceName: 'SOS智能报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '李成玉',
      deviceName: '生命体征监测仪',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '宋传礼',
      deviceName: '烟雾报警器',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '王勤伟',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '离线',
    },
    {
      name: '陈复瑞',
      deviceName: '乐龄智护胸卡',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '沈启花',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
    {
      name: '李崇忠',
      deviceName: '双向通话摄像头',
      year: '2025年度',
      status: '正常',
    },
  ];
</script>

<template>
  <div class="flex flex-col">
    <div class="common-box flex flex-col" style="padding-bottom: 10px">
      <span class="big-title">综合数据</span>
      <div class="w-full h-[320px] center-grid">
        <div
          v-for="item in dataItems"
          :key="item.title"
          class="data-item flex flex-col"
        >
          <div class="w-[100px] h-[100px]">
            <img :src="item.icon" />
            <!-- <div class="svg-container" v-html="item.icon"></div> -->
          </div>

          <div class="streamer-button streamer-button-2">
            <div class="streamer-content bottom-box flex flex-col">
              <span class="data-title">{{ item.title }}</span>
              <span class="data-value">{{ item.value }}</span>
            </div>
          </div>
        </div>
      </div>
    </div>

    <span class="mid-title mt-3">设备安装绑定数据</span>
    <div class="w-full h-[200px] mt-2">
      <ScrollTable :height="500" :columns="columns" :data="data" />
    </div>
  </div>
</template>

<style lang="less">
  .center-grid {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    grid-template-rows: repeat(2, 1fr);
    background: var(--bg-color);

    .data-item {
      align-items: center;

      .data-title {
        font-size: 14px;
        width: 120px;
        text-align: center;
        color: #ffffff;
        z-index: 1;
      }

      .data-value {
        font-weight: 600;
        font-size: 20px;
        color: #c180ff;
        z-index: 1;
      }

      .bottom-box {
        align-items: center;
        // border: 1px solid #27b6eb;
        // box-shadow: inset 0 0 10px #27b6eb;
        box-shadow: inset 0 0 2px #27b6eb;
        border-radius: 8px;
        padding: 2px 10px;
      }

      .svg-container svg {
        width: 100% !important;
        height: 100% !important;
        object-fit: contain; /* 或 fill, cover, 取决于你想要的缩放效果 */
      }
    }
  }
</style>
